<template>
  <div>
    <div
      class="goods"
      v-for="(v, i) in arr"
      :key="i"
      @click="gotoshopinfo(v.id)"
    >
      <img :src="require('../../../assets/' + v.imgurl + '.png')" alt="" />
      <div class="info">
        <div class="no1">
          <h2>{{ v.name }}</h2>
          <i class="iconfont icon-youxi"></i>
        </div>
        <div class="no2">
          <span class="pinfen">{{ v.pingfen }}分</span>
          <span class="yueshou">月售{{ v.yueshou }}</span>
          <span class="time">37分钟</span>
          <span class="juli">2.5km</span>
        </div>
        <div class="no3">
          <span class="qisong">起送￥15</span>
          <span class="biaoqian">免配送费</span>
        </div>
        <div class="no4">"{{ v.pinjia }}"</div>
        <div class="no5">
          <div class="youhui">
            <div class="butie">8元双重补贴</div>
            <div class="chaifen">老友6元+本店2元</div>
          </div>
          <i class="iconfont icon-dui1"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getlink } from "@/api/getlink.js";
export default {
  methods: {
    gotoshopinfo(data) {
      this.$store.commit("upid", { newid: data });
      this.$router.push("/shopinfo");
    },
  },
  data() {
    return {
      arr: [],
    };
  },
  created: function () {
    getlink("/data/json").then((ok) => {
      this.arr = ok.data.shangjia;
    });
  },
};
</script>

<style scoped>
.goods {
  width: 100%;
  height: 1.38rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  border-radius: 0.1rem;
  margin-top: 0.1rem;
}
img {
  width: 1.1rem;
  border-radius: 0.1rem;
}
.info {
  width: 2.15rem;
  height: 1.1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 0.1rem;
  font-size: 0.14rem;
  color: #7c7c7c;
}
.no1 {
  width: 2.15rem;
  display: flex;
  justify-content: space-between;
  align-content: space-between;
}
h2 {
  font-size: 0.16rem;
  font-weight: 700;
  color: black;
}
.icon-youxi {
  margin-left: 0.55rem;
  margin-top: 0.06rem;
}
.no2 {
  margin-top: 0.03rem;
}
.biaoqian {
  color: #f37006;
  font-size: 0.16rem;
  margin-left: 0.1rem;
}
.time {
  margin-left: 0.35rem;
}
.pinfen {
  color: #f37006;
  font-size: 0.14rem;
  margin-right: 0.1rem;
}
.no3 {
  margin-top: 0.03rem;
}
.no4 {
  margin-top: 0.03rem;
  font-size: 0.1rem;
  color: #f37006;
  padding: 0.03rem 0.06rem;
  background-color: #ffeee2;
  border-radius: 0.04rem;
}
.no5 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.03rem;
}
.youhui {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 0.1rem;
  border-radius: 0.05rem;
  border: 1px solid red;
}
.butie {
  padding: 0.03rem;
  background-color: #ff4b34;
  color: #eeeeee;
}
.chaifen {
  color: red;
}
.icon-dui1 {
  margin-left: 0.1rem;
}
</style>